<template>
  <div>
    <el-menu
      background-color="#F7F8E0"
      text-color="#000"
      active-text-color="red"
      unique-opened
      :collapse="isCollapse"
      :collapse-transition="false"
      router
      :default-active="activeurl"
    >
      <!-- 一级菜单 -->
      <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
        <!-- 一级菜单的模板区域 -->
        <template slot="title">
          <!-- 图标 -->
          <i :class="iconsObj[item.id]"></i>
          <!-- 文本 -->
          <span>{{ item.name }}</span>
        </template>

        <!-- 二级菜单 -->
        <el-menu-item
          :index="'/' + subItem.url"
          v-for="subItem in item.children"
          :key="subItem.id"
          @click="saveNavState('/' + subItem.url)"
        >
          <template slot="title">
            <!-- 图标 -->
            <i class="el-icon-menu"></i>
            <!-- 文本 -->
            <span>{{ subItem.name }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Menu',
  data () {
    return {
      // 左侧导航栏菜单数据 可以通过token向服务器获取用户的菜单信息（根据角色权限不同
      // menulist: [],
      menulist: [
        {
          id: 1,
          name: '系统管理',
          url: 'users',
          children: [
            {
              id: 101,
              name: '用户列表',
              url: 'user',
              children: []
            },
            {
              id: 102,
              name: '角色管理',
              url: 'role',
              children: []
            },
            {
              id: 103,
              name: '权限管理',
              url: 'permission',
              children: []
            }
          ]
        }
      ],
      iconsObj: {
        1: 'el-icon-setting',
        5: 'el-icon-takeaway-box',
        7: 'el-icon-s-shop'
      },
      // 被激活的链接地址
      activeurl: ''
    }
  },
  created () {
    this.activeurl = window.sessionStorage.getItem('activeurl')
    this.$axios.http.get('/permissions/userPermissionList').then(reponse => {
      // console.log(reponse.data.data)
      if (reponse.data.status !== 200) {
        this.$message.error(reponse.data.message)
        this.$router.push('/login')
      }
      this.menulist = reponse.data.data
    })
  },
  methods: {
    // 保存链接的激活状态
    saveNavState (activeurl) {
      window.sessionStorage.setItem('activeurl', activeurl)
      this.activeurl = activeurl
    }
  },
  computed: {
    ...mapState({
      isCollapse: 'isCollapse'
    })
  }
}
</script>

<style lang="less" scoped>
.el-menu {
  border-right: none;
}

</style>
